import React, { Component } from 'react';
import { Card, Anchor, Row, Col, Timeline, Spin } from 'antd';
import moment from 'moment';
import DescriptionList from '@/components/DescriptionList';
import downloadFile, { getFileName } from '@/utils/utils';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';
import HdlRemark from '@/pages/components/HdlRemark';

const { Description } = DescriptionList;
const { Link } = Anchor;
class DetailInfor extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  handleClick = e => {
    e.preventDefault();
  };

  // 下载
  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: getFileName(file[1]) });
  };

  // 下载
  addLink = matinfo =>
    matinfo.split(',').map(item => {
      const matinfoItem = item.split('|')[1];
      const matinfoName = getFileName(matinfoItem);
      return (
        <div key={item.split('|')[0]}>
          <a onClick={() => this.downLoad(item)}>{matinfoName}</a>
        </div>
      );
    });

  commanName = item => (item.inpVal ? `${item.inpVal}` : '--');

  // 下载
  getVal = value => {
    if (value.inpVal) {
      if (Number(value.inpType) === 9 && value.inpVal !== '[]') {
        return this.addLink(value.inpVal);
      }
      if (Number(value.inpType) === 9 && value.inpVal === '[]') {
        return '--';
      }
      return this.commanName(value);
    }
    return '--';
  };

  render() {
    const { detail, hdlVo, insRemark, refundInfo, loading } = this.props;
    const { empSendInfoVo, empBaseInfoVo, matlist, origInalRemark, probDets } = detail;
    const isShowMat = () => {
      if (hdlVo.coltFlag) {
        if (String(hdlVo.coltFlag) === '1') {
          return (
            <DescriptionList>
              {matlist &&
                matlist.map(item => (
                  <Description
                    term={item.matName}
                    key={item.matId}
                    style={{ wordBreak: 'break-all' }}
                  >
                    {this.getVal(item)}
                  </Description>
                ))}
              <Description term="原件材料">
                {hdlVo.masterFileName ? hdlVo.masterFileName : '--'}
              </Description>
              <Description term="复印件材料">
                {hdlVo.copyFileName ? hdlVo.copyFileName : '--'}
              </Description>
              <Description term="材料是否完整">
                {hdlVo.matFlagName ? hdlVo.matFlagName : '--'}
              </Description>
            </DescriptionList>
          );
        }
        return (
          <DescriptionList>
            <Description term="材料是否完整">不需要材料</Description>
          </DescriptionList>
        );
      }
      return true;
    };
    const refund = refundInfoData =>
      refundInfoData.map(item => (
        <DescriptionList key={item.creTime} style={{ marginBottom: 20 }}>
          <Description term="报销金额">{item.reimbAmt}</Description>
          <Description term="本次返款金额">{item.refundAmt}</Description>
          <Description term="附件">
            {item.affix ? (
              <a onClick={() => this.downLoad(item.affix)}>{item.affix.split('|')[1]}</a>
            ) : (
              '--'
            )}
          </Description>
          <Description term="返款记录添加人">{item.creName ? item.creName : '--'}</Description>
          <Description term="返款记录添加时间">
            {item.creTime ? moment(item.creTime).format('YYYY-MM-DD HH:mm') : '--'}
          </Description>
          <Description term="返款">{item.remark ? item.remark : '--'}</Description>
        </DescriptionList>
      ));

    return (
      <div>
        <Spin tip="Loading..." spinning={loading}>
          <Anchor onClick={this.handleClick} targetOffset={50}>
            <Row type="flex" justify="space-around">
              <Col>
                <Link href="#sendInfor" title="派单信息" />
              </Col>
              <Col>
                <Link href="#basicma" title="基本信息" />
              </Col>
              <Col>
                <Link href="#businessInfor" title="业务信息" />
              </Col>
              <Col>
                <Link href="#materialInfor" title="材料信息" />
              </Col>
              <Col>
                <Link href="#masterInfor" title="原件流转信息" />
              </Col>
              {refundInfo ? (
                <Col>
                  <Link href="#refundInfor" title="返款信息" />
                </Col>
              ) : null}
              <Col>
                <Link href="#hdlRemark" title="办理备注" />
              </Col>
              <Col>
                <Link href="#proRecording" title="问题记录" />
              </Col>
            </Row>
          </Anchor>
          <Card title={<span id="sendInfor">派单信息</span>}>
            <DescriptionList>
              <Description term="签约方">{empSendInfoVo.sendCorpName}</Description>
              <Description term="客户名称">{empSendInfoVo.custName}</Description>
              <Description term="执行地">{empSendInfoVo.areaName}</Description>
              <Description term="派单时间">
                {empSendInfoVo.sendDate
                  ? moment(empSendInfoVo.sendDate).format('YYYY-MM-DD HH:mm')
                  : '--'}
              </Description>
              <Description term="在职状态">{empSendInfoVo.entryStatusName}</Description>
              <Description term="所属客服">{empSendInfoVo.blngCs}</Description>
            </DescriptionList>
          </Card>

          <Card title={<span id="basicma">基本信息</span>}>
            <DescriptionList>
              <Description term="姓名">{empBaseInfoVo.empName}</Description>
              <Description term="证件类型">{empBaseInfoVo.certTypeName}</Description>
              <Description term="证件号">{empBaseInfoVo.certNo}</Description>
              <Description term="性别">{empBaseInfoVo.genderName}</Description>
              <Description term="国籍">{empBaseInfoVo.nationName}</Description>
              <Description term="出生日期">
                {empBaseInfoVo.birthDate
                  ? moment(empBaseInfoVo.birthDate).format('YYYY-MM-DD')
                  : null}
              </Description>
              <Description term="电话">{empBaseInfoVo.mobile}</Description>
              <Description term="员工邮箱">
                {empBaseInfoVo.email ? empBaseInfoVo.email : '--'}
              </Description>
            </DescriptionList>
          </Card>
          <Card title={<span id="businessInfor">业务信息</span>}>
            <DescriptionList style={{ marginBottom: hdlVo.refundFlag === 1 ? 20 : 0 }}>
              <Description term="服务类型">{hdlVo.serTypeIdName}</Description>
              {hdlVo.refundFlagName ? (
                <Description term="是否有返款">{hdlVo.refundFlagName}</Description>
              ) : null}
              {hdlVo.refundFlag === 1 ? (
                <Description term="收款方信息">
                  {hdlVo.payeeName ? hdlVo.payeeName : '--'}
                </Description>
              ) : null}
              {hdlVo.refundFlag === 1 ? null : (
                <Description term="操作时间">
                  {hdlVo.operTime ? moment(hdlVo.operTime).format('YYYY-MM-DD HH:mm') : '--'}
                </Description>
              )}
            </DescriptionList>

            {hdlVo.refundFlag === 1 ? (
              <DescriptionList>
                <Description term="收款方银行账号">
                  {hdlVo.payeeBankcardNo ? hdlVo.payeeBankcardNo : '--'}
                </Description>
                <Description term="开户行信息">
                  {hdlVo.payeeBankOfDepo ? hdlVo.payeeBankOfDepo : '--'}
                </Description>
                <Description term="操作时间">
                  {hdlVo.operTime ? moment(hdlVo.operTime).format('YYYY-MM-DD HH:mm') : '--'}
                </Description>
              </DescriptionList>
            ) : null}
          </Card>

          <Card title={<span id="materialInfor">材料信息</span>}>{isShowMat()}</Card>
          <Card title={<span id="masterInfor">原件流转信息</span>}>
            {origInalRemark && origInalRemark.length ? (
              <Timeline>
                {origInalRemark.map(item => (
                  <Timeline.Item key={item.creTime}>
                    <p>
                      <span style={{ marginRight: 18 }}>
                        {item.creTime ? moment(item.creTime).format('YYYY-MM-DD HH:mm') : '--'}
                      </span>
                      <span>{item.creName}</span>
                    </p>
                    {item.optMasterFile && <p>交接原件：{item.optMasterFileName}</p>}
                    <p>流转备注：{item.content || '--'}</p>
                    {item.affixIds && item.affixIds.length?(
                      <p>流转附件：
                        {item.affixIds.map(i => (
                          <Row key={i.affixId} style={{ marginRight: 30 }}>
                            <a
                              onClick={e => {
                        e.preventDefault();
                        downloadFile({ fileId: i.affixId, fileName: i.affixName });
                      }}
                            >
                              {i.affixName || '--'}
                            </a>
                          </Row>
                ))}
                      </p>
                    ):null}
                    
                  </Timeline.Item>
                ))}
              </Timeline>
            ) : null}
            {hdlVo.issState === 2 ? (
              <DescriptionList>
                <Description term="原件发放方式">{hdlVo.issWayName}</Description>
                {hdlVo.issWay !== 1 ? (
                  <Description term="快递单号">{hdlVo.exprsNo}</Description>
                ) : null}
                {hdlVo.issWay !== 1 ? (
                  <Description term="邮寄地址">{hdlVo.exprsAddr}</Description>
                ) : null}
                <Description term="备注">{hdlVo.issRemark}</Description>
                <Description term="发放操作时间">
                  {hdlVo.operTime ? moment(hdlVo.operTime).format('YYYY-MM-DD HH:mm') : '--'}
                </Description>
              </DescriptionList>
            ) : null}
            {!(origInalRemark && origInalRemark.length) && !(hdlVo.issState === 2)
              ? '暂无数据'
              : null}
          </Card>
          {refundInfo && (
            <Card title={<span id="refundInfor">返款信息</span>}>
              {refundInfo.length ? refund(refundInfo) : '暂无数据'}
            </Card>
          )}
          <div id="hdlRemark">
            <HdlRemark hdlRemark={insRemark} />
          </div>
          <ProRecording proRecording={probDets} />
        </Spin>
      </div>
    );
  }
}

export default DetailInfor;
